<template>
  <!--临时工艺更改工单列表-->
  <div class="production_process">
    <mes-search-comp
      ref="mesSearch"
      :searchList="tableColConfig"
      :searchResult="searchResult"
      :showSlotSet="true"
      @setCol="$refs.ColumnControl.openDialog()"
      @searchInfo="search">
    </mes-search-comp>
    <!--生产调度列表-->
    <div class="table_container">
      <el-table
        ref="tableNode"
        :data="listData.list"
        border
        stripe
        v-loading="isLoading"
        style="width: 100%"
        :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
        @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
        @sort-change="_sort"
        @selection-change="handleSelectionChange"
        @filter-change="handleFilterChange">
        <el-table-column
          fixed="left"
          type="selection"
          width="40">
        </el-table-column>
        <mes-col-comp
          :key="column.prop"
          v-for="column in columnList"
          :column="column">
        </mes-col-comp>
        <el-table-column
          fixed="right"
          :resizable="false"
          min-width="90"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <span class="jump_item" @click.stop="showLog(scope.row)">操作记录</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize"
      :pageSelectShow="false">
    </mes-pagination>
    <!--批次列表-->
    <batch-list ref="batchList"></batch-list>
    <!-- 日志详情 -->
    <log-detail ref="logDetail"></log-detail>
    <!--列隐藏-->
    <column-control
      ref="ColumnControl"
      :colList="tableColConfig"
      @saveCol="saveCol"
    ></column-control>
  </div>
</template>

<script>
import BatchList from './BatchList'
import tableColConfig from './productionProcessCols'
import {BoolType} from '@/components/mesDict'

export default {
  name: 'ProductionProcess',
  components: {
    BatchList,
    BoolType,
  },
  data() {
    return {
      isLoading: false, // 数据加载中
      searchData: {}, // 查询参数
      sortData: {}, // 排序对象
      selectData: [], // 选中的数据
      searchResult: NaN, // 搜索结果数
      checkedKeys: window.localStorage.getItem(this.$route.name), // 显示的列集合
    }
  },
  computed: {
    listData() {
      return this.$store.state.temporaryWorkbench.productionList || {}
    },
    // 周转进度状态
    workorderProcessStatus() {
      return this.$store.state.dict.workorderProcessStatus.labels || []
    },
    // 周转状态列表
    processStatus() {
      let list = this.$store.state.dict.workorderProcessStatus.labels || []
      return list.filter(item => item.value !== 'ToBeAssigned' && item.value !== 'ToBeConfirmed') || []
    },
    // 进度状态初始查询条件
    processStatusIds() {
      return this.processStatus.reduce((pre, cur) => [...pre, cur.id], []).join(',')
    },
    tableColConfig,
    // 列循环
    columnList() {
      this.$nextTick(() => {
        this.$refs.tableNode.doLayout()
      })
      let checkedKeysList = this.checkedKeys ? JSON.parse(this.checkedKeys) : this.tableColConfig.reduce((pre, cur) => [...pre, cur.prop], [])
      return this.tableColConfig.filter(item => item.noForCol !== true && (item.noChecked === true || checkedKeysList.some(key => key === item.prop)))
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 修改列显示
    saveCol(checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    // 列筛选回调
    handleFilterChange(filters) {
      let query = this.$filterParams(this.tableColConfig, filters)
      Object.assign(this.searchData, query.search)
      this.$refs.tableNode.clearSort()
      this.sortData = query.order
      this.init()
    },
    // 初始化列表数据
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/workorder/workorder/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: 5,
          query: {
            columns: this.tableColConfig.reduce((pre, cur) => [...pre, cur.prop], []),
            ...this.searchData,
            viewSource: 8
          }, // viewSource 视图来源，3表示生产调度工单
          sort: this.sortData
        },
        module: 'temporaryWorkbench',
        state: 'productionList'
      }
      if (!postData.data.query.workorderProcessStatusId) {
        postData.data.query.workorderProcessStatusId = this.processStatusIds
      }
      // postData.data.taskNumber = this.currentTreeNode
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).then(() => {
        this.getBatchList()
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 搜索方法
    search(params) {
      this.searchData = params
      this.sortData = {}
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.init()
    },
    // 刷新方法
    refresh() {
      this.searchData = {} // 查询参数
      this.sortData = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 显示日志
    showLog(row) {
      this.$refs.logDetail.openDialog({
        title: '工单编号',
        name: row.number,
        url: 'a/workorderstatuschangehistory/workorderStatusChangeHistory/list',
        query: {
          workorderId: row.id
        }
      })
    },
    // 调度列表勾选
    handleSelectionChange(val) {
      this.selectData = val
      this.getBatchList()
    },
    // 批次清单列表获取
    getBatchList() {
      let idList = this.selectData.map(item => item.id)
      this.$refs.batchList.showBatchList(idList.join(','))
    },
  }
}
</script>

<style scoped lang="less">

</style>
